<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>欢迎使用网页技术检测与AI助手</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      color: #333;
      background-color: #f5f5f5;
      line-height: 1.6;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 30px;
    }
    
    header {
      text-align: center;
      margin-bottom: 40px;
    }
    
    .logo {
      width: 120px;
      height: 120px;
      margin-bottom: 20px;
    }
    
    h1 {
      color: #4285f4;
      font-size: 32px;
      margin: 0;
    }
    
    h2 {
      color: #4285f4;
      font-size: 24px;
      margin: 30px 0 15px;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
    }
    
    .version {
      color: #666;
      font-size: 16px;
      margin-top: 5px;
    }
    
    .card {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      margin-bottom: 30px;
      overflow: hidden;
    }
    
    .card-header {
      background: #4285f4;
      color: white;
      padding: 15px 20px;
      font-weight: bold;
      font-size: 18px;
    }
    
    .card-body {
      padding: 20px;
    }
    
    ul {
      padding-left: 20px;
    }
    
    li {
      margin-bottom: 10px;
    }
    
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    
    .feature-item {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .feature-item h3 {
      color: #4285f4;
      margin-top: 0;
    }
    
    .cta-button {
      display: inline-block;
      background: #4285f4;
      color: white;
      padding: 12px 25px;
      border-radius: 4px;
      text-decoration: none;
      font-weight: bold;
      margin-top: 20px;
      transition: background 0.3s;
    }
    
    .cta-button:hover {
      background: #3367d6;
    }
    
    footer {
      text-align: center;
      margin-top: 40px;
      color: #777;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <picture>
        <source srcset="icons/icon128.svg" type="image/svg+xml">
        <img src="icons/icon128.png" alt="扩展图标" class="logo">
      </picture>
      <h1>网页技术检测与AI助手</h1>
      <div class="version" id="version">版本 1.0</div>
    </header>
    
    <div class="card">
      <div class="card-header">欢迎使用</div>
      <div class="card-body">
        <p>感谢您安装我们的Chrome扩展程序！本扩展可以帮助您:</p>
        <ul>
          <li><strong>检测网页使用的技术栈</strong>，包括框架、库和工具</li>
          <li>通过<strong>本地Ollama大模型</strong>提供智能AI聊天功能</li>
          <li>自动<strong>监控网页变化</strong>实时更新技术检测结果</li>
          <li>为检测到的技术提供<strong>详细的学习资源</strong></li>
        </ul>
      </div>
    </div>
    
    <h2>使用指南</h2>
    <div class="feature-grid">
      <div class="feature-item">
        <h3>技术检测</h3>
        <p>点击扩展图标，在"技术检测"标签页查看当前网页使用的所有技术。点击任何技术可以查看详细信息。</p>
      </div>
      
      <div class="feature-item">
        <h3>AI聊天</h3>
        <p>切换到"AI聊天"标签页与您的本地Ollama模型交流。勾选"启用网络搜索"可获取更新的信息。</p>
      </div>
      
      <div class="feature-item">
        <h3>自动更新</h3>
        <p>扩展会自动监测网页变化，当检测到新技术时会实时更新结果，无需手动刷新。</p>
      </div>
      
      <div class="feature-item">
        <h3>设置</h3>
        <p>在"设置"标签页中配置Ollama API地址和模型名称，满足您的个性化需求。</p>
      </div>
    </div>
    
    <h2>开始使用</h2>
    <div class="card">
      <div class="card-header">准备工作</div>
      <div class="card-body">
        <p>要充分利用本扩展的功能，您需要:</p>
        <ol>
          <li>确保已下载并安装所有必要的图标文件（如果您从源码安装）</li>
          <li>安装并启动<a href="https://ollama.ai/" target="_blank">Ollama</a>（用于AI聊天功能）</li>
          <li>使用<code>ollama pull llama3</code>下载所需的模型</li>
        </ol>
        
        <p>现在，您可以访问任何网站，点击扩展图标开始使用！</p>
        
        <a href="https://ollama.ai/download" target="_blank" class="cta-button">下载Ollama</a>
      </div>
    </div>
    
    <footer>
      <p>网页技术检测与AI助手扩展 &copy; 2023</p>
    </footer>
  </div>
  
  <script>
    // 显示当前版本号
    document.addEventListener('DOMContentLoaded', function() {
      const version = chrome.runtime.getManifest().version;
      document.getElementById('version').textContent = `版本 ${version}`;
    });
  </script>
</body>
</html> 